<!--
 * @Author: zl
 * @Date: 2021-03-16 15:09:41
 * @LastEditTime: 2021-12-22 15:43:20
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3-element-admin\src\components\dashboard\LiveChart.vue
-->
<template>
    <div
        v-resize="myChart"
        style="height: 400px; margin-top: 20px"
        ref="liveChart"
    ></div>
</template>

<script setup>
import * as echarts from "echarts/core";
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
} from "echarts/components";
import { BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
// import * as dayjs from "dayjs";
import { unwarp } from "@/utils";
import { onMounted, ref, onUnmounted, reactive } from "vue";

/**
 * @description: 生成20条数据
 * @param {*}
 * @return {*}
 */
// const dataList = async (userId) => {
//     let forms = [];
//     let nums = [];
//     const { code, data } = await VE_API.system.homeFormEchars({ userId });
//     if (code == "00") {
//         data.forEach((k) => {
//             forms.push(k.name);
//             nums.push(k.nums);
//         });
//         form.forms = forms;
//         form.nums = nums;
//         unwarp(myChart.value).setOption(option);
//     }
//     // let nowTime = new Date().getTime();
//     // for (let i = 0; i < 30; i++) {
//     //     date.push(dayjs(nowTime - i * 1000).format("HH:mm:ss"));
//     //     num.push((Math.random() * 10).toFixed(0) * 1);
//     // }
//     // console.log(date.reverse());
//     // return {
//     //     date: date.reverse(),
//     //     num,
//     // };
// };

echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    BarChart,
    CanvasRenderer,
]);
const liveChart = ref(null);
const myChart = ref(null);
const form = reactive({
    forms: [],
    nums: [],
});

let option = {
    title: {
        text: "表单填报总数",
    },
    grid: {
        left: "0",
        right: "0",
        top: "10%",
        bottom: "0",
        containLabel: true,
    },
    tooltip: {
        trigger: "axis",
    },
    xAxis: {
        data: form.forms,
    },
    yAxis: {
        type: "value",
    },
    series: [
        {
            data: form.nums,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
                color: "rgba(180, 180, 180, 0.2)",
            },
        },
    ],
};
/**
 * @description: 动态数据
 * @param {*}
 * @return {*}
 */
const getNewData = async (myChart, userId) => {
    unwarp(myChart.value).setOption(option);
    const { code, data } = await VE_API.system.homeFormEchars({ userId });
    if (code == "00") {
        form.forms.shift();
        form.nums.shift();
        data.forEach((k) => {
            form.forms.push(k.name);
            form.nums.push(k.nums);
        });
        unwarp(myChart.value).setOption(option);
    }
    // setInterval(() => {
    //     $_dataList.date.shift();
    //     $_dataList.num.shift();
    //     $_dataList.date.push(dayjs(new Date().getTime()).format("HH:mm:ss"));
    //     $_dataList.num.push((Math.random() * 10).toFixed(0) * 1);
    //     unwarp(myChart.value).setOption(option);
    // }, 1000);
};
onMounted(() => {
    myChart.value = echarts.init(liveChart.value);
    let userId = sessionStorage.getItem("unameid");
    // dataList(userId);
    getNewData(myChart, userId);
});
onUnmounted(() => {
    unwarp(myChart.value).dispose();
});
</script>

<style lang="scss" scoped></style>
